<template>
	<div id="big-data-container" class="big-data-container">
		<div class="head">
			<h1><div style="font-size: 35px;">数字化部集中监控平台</div></h1>
		</div>
		<div class="data-container" style="color: floralwhite;">
			<div class="data-head" style="height: 45%; ">
				<div class="data-head-item" style="width: 30%;height:100%;">
					<div class="data-head-item-gdzz" style="height: 13%; text-align: center;padding-top: 15px; font-size: 34px; font-weight:550; background-color: #10096a;">IT任务</div>
					<div class="data-head-item-gdzz2" style="height: 87%;">
						<div style="float: left; width: 33.33%; height: 100%;">
							<div id="chart-vhead-1-a" style=" width: 100%; height: 60%;"></div>
							<div style=" width: 100%; height: 40%; text-align: center; font-size: 24px;">
								<div>{{inprogress}}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #f55301;">进行中</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{total}}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{notinprogress}}</div>
							</div>
						</div>
						
						<div style="float: left;width: 33.33%;height: 100%;">
							
							<div id="chart-vhead-1-b" style=" width: 100%; height: 60%;"></div>
							<div style=" width: 100%; height: 40%; text-align: center; font-size: 24px;">
								<div>{{completed}}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #5263ff;">已完成</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{total}}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{notcompleted}}</div>
							</div>
							
						</div>
						<div style="float: left;width: 33.33%;height: 100%;">
							
							<div id="chart-vhead-1-c" style=" width: 100%; height: 60%;"></div>
							<div style=" width: 100%; height: 40%; text-align: center; font-size: 24px;">
								<div>{{notstarted}}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #5fb878;">未开始</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{total}}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{started}}</div>
							</div>
							
						</div>
					</div>
				</div>
				<div class="data-head-item" style="width: 30%;height: 100%;">
					<div class="data-head-item-gdzz" style="height: 13%; text-align: center;padding-top: 15px; font-size: 34px; font-weight:550; background-color: #10096a;">数字化部服务满意度调查</div>
					<div class="data-head-item-gdzz2" style="height: 87%; width:100%;">
						<div id="chart-vhead-2" style="width:100%;height:100%;">
								
						</div>
					</div>
				</div>
				<div class="data-head-item" style="width: 40%;height: 100%;">
					<div class="data-head-item-gdzz" style="height: 13%; text-align: center;padding-top: 15px; font-size: 34px; font-weight:550; background-color: #10096a;">已完成IT任务</div>
					<div class="data-head-item-gdzz2" style="height: 87%; ">
						<el-table 
						    :data="tableData2"
						    height="100%"
						    border
						    style="width: 100%">
						    <el-table-column 
						      prop="progress"
						      label="进度"
						      width="160">
							  <template v-slot="scope">
							  		<el-progress :text-inside="true" :stroke-width="32" :percentage="scope.row.progress" :color="customColorGreen"></el-progress>
							  </template>
						    </el-table-column>
						    <el-table-column 
						      prop="tc_departname"
						      label="提出部门"
							  width="160">
						    </el-table-column>
							<el-table-column 
							  prop="zeren"
							  label="责任人"
							  width="160">
							</el-table-column>
							<el-table-column 
							  prop="q_decribe"
							  label="问题描述">
							</el-table-column>
							<el-table-column 
							  prop="a_decribe"
							  label="进度说明">
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div id="data-center" style=" margin-top: 15px; height: 55%;">
				<div class="data-center-item" style="height: 13%; text-align: center;padding-top: 20px; font-size: 34px; font-weight:550; background-color: #10096a;">
					未完成IT任务追踪
				</div>
				<div class="data-center-item" style=" height: 85%;">
					<el-table ref="table" 
					    :data="tableData"
					    height="100%"
					    border
					    style="width: 100%">
					    <el-table-column 
					      prop="progress"
					      label="进度"
					      width="200">
						  <template v-slot="scope">
							<el-progress :text-inside="true" :stroke-width="32" :percentage="scope.row.progress" :color="customColor"></el-progress>
						  </template>
					    </el-table-column>
					    <el-table-column 
					      prop="rec_datetime"
					      label="受理时间"
					      width="200">
					    </el-table-column>
					    <el-table-column 
					      prop="tc_departname"
					      label="提出部门"
						  width="200">
					    </el-table-column>
						<el-table-column
						  prop="tc_ren"
						  label="提出人"
						  width="200">
						</el-table-column>
						<el-table-column 
						  prop="zeren"
						  label="责任人"
						  width="200">
						</el-table-column>
						<el-table-column 
						  prop="q_decribe"
						  label="问题描述">
						</el-table-column>
						<el-table-column 
						  prop="a_decribe"
						  label="进度说明">
						</el-table-column>
					  </el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	var echarts = require("echarts");
	let  $charthead2,
		$charthead1a,
		$charthead1b,
		$charthead1c;
	import {
		charthead1a,
		charthead1b,
		charthead2,
		charthead1c,
	} from "./bigdata/chart-optionsnew";
import "./bigdata/layout2.less";
import http from "@/api/http.js";
	export default {
		components: {
			// "iview-circle": IviewCircle
		},
		data() {
			return {
				head2Total:0,
				notstarted:0,
				inprogress:0,
				completed:0,
				total:0,
				notinprogress:0,
				notcompleted:0,
				started:0,
				tableData:[],
				tableData2:[],
				chartHeadArry:[],
				percentages: 100,
				customColor: '#f56c6c',
				customColorGreen:'#67c23a',
				customColors: [
				  {color: '#d9d9d9', progress: 0},
				  {color: '#f56c6c', progress: 20},
				  {color: '#e6a23c', progress: 40},
				  {color: '#6f7ad3', progress: 60},
				  {color: '#1989fa', progress: 80},
				  {color: '#5cb87a', progress: 100}
				]
			};
		},
		created() {
			console.log("chart");
		},
		methods:{

		},
		mounted() {
			if ($charthead2) {
				$charthead2.dispose();
				$charthead1a.dispose();
				$charthead1b.dispose();
				$charthead1c.dispose();
			}
			
			$charthead1a = echarts.init(document.getElementById("chart-vhead-1-a"));
			$charthead1b = echarts.init(document.getElementById("chart-vhead-1-b"));
			$charthead1c = echarts.init(document.getElementById("chart-vhead-1-c"));
			let url_1a = "/api/digitaldata/getCcTackInfo";
			http.post(url_1a,{},true).then((s) => {
				var jsonArr1 = [];
				var jsonArr2 = [];
				var jsonArr3 = [];
				this.notstarted = s[0].num;
				this.inprogress = s[1].num;
				this.completed = s[2].num;
				this.total = s[0].num+s[1].num+s[2].num;
				this.notinprogress = s[0].num+s[2].num;
				this.notcompleted = s[0].num+s[1].num;
				this.started = s[1].num+s[2].num;
				
				let exp = /\.{0,1}0+$/g;
				let inprogressPercent = this.inprogress * 100 / this.total;   
				inprogressPercent = inprogressPercent.toFixed(2);
				inprogressPercent = inprogressPercent.replace(exp, "");
				let completedPercent = this.completed * 100 / this.total;
				completedPercent = completedPercent.toFixed(2);
				completedPercent = completedPercent.replace(exp, "");
				let notstartedPercent = this.notstarted * 100 / this.total;
				notstartedPercent = notstartedPercent.toFixed(2);
				notstartedPercent = notstartedPercent.replace(exp, "");
				jsonArr1.push({
					value : this.inprogress,
					name : "进行中"
				});
				jsonArr1.push({
					value : this.notinprogress,
					name : "其他"
				})
				jsonArr2.push({
					value : this.completed,
					name : "已完成"
				});
				jsonArr2.push({
					value : this.notcompleted,
					name : "其他"
				})
				jsonArr3.push({
					value : this.notstarted,
					name : "未开始"
				});
				jsonArr3.push({
					value : this.started,
					name : "其他"
				})
				charthead1a.series[0].data=jsonArr1;
				charthead1a.series[1].data[0].value = inprogressPercent;
				$charthead1a.setOption(charthead1a, true);
				charthead1b.series[0].data=jsonArr2;
				charthead1b.series[1].data[0].value = completedPercent;
				$charthead1b.setOption(charthead1b, true);
				charthead1c.series[0].data=jsonArr3;
				charthead1c.series[1].data[0].value = notstartedPercent;
				$charthead1c.setOption(charthead1c, true);
			});
			$charthead2 = echarts.init(document.getElementById("chart-vhead-2"));
			
			let url = "/api/digitaldata/getItSurveyInfo";
			http.post(url, {}, true).then((s) => {
				var jsonArr = [];
				var total = 0;
				for (var i = 0; i < s.list1.length; i++) {
					var value = s.list1[i];
					var name = s.list2[i];
					total = Number(total)+Number(value);
					jsonArr.push({
						value: value,
						name: name
					});
				}
				this.chartHeadArry = jsonArr;
				console.log("jsonArr ----  "+jsonArr);
				console.log("chartHeadArry ----  "+this.chartHeadArry);
				
				let charthead2 = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						itemGap: 15,
						itemWidth: 30,
						itemHeight: 20,
						orient: 'vertical',
						right: 10,
						top: 20,
						textStyle: {
							color: '#ffffff',
							fontSize: 22,
						},
						formatter:function(name){
							let data  = jsonArr;
							let total = 0 ;
							let tarValue = 0;
							for(let i =0 ;i<data.length;i++){
								total += parseInt(data[i].value);
								if(data[i].name == name){
									tarValue = data[i].value;
								}
							}
							let arr = [name+'  ',+' '+parseInt(tarValue)+'个','  '+((tarValue/total)*100).toFixed(2)+'%']
							return arr.join('')
						}
					},
					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					series: [{
						name: '评价',
						type: 'pie',
						radius: ['35%', '90%'],
						center: ['40%', '50%'],
						/* selectedOffset:0,
						selectedMode:false, */
						data: [
							//{ value: 38, name: '5 星' },
							// { value: 26, name: '1 星' } 
						],
						label: {
							show: false,
						},
						labelLine: {
							show: false
						},
						emphasis: {
							label: {
								show: false,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
					},
					//内圈百分比
					{
						type: "pie",
						center: ["40%", "50%"],
						radius: ["00%", "50%"], //内圆的半径，第一个为内半径，第二个为外半径
						avoidLabelOverlap: false,
						color: ["#000042"],
						data: [{
							hoverOffset: 1,
							value: "0",
							position: "center",
							name: "",
							itemStyle: {
								color: "#000042",
							},
							label: {
								normal: {
									formatter: "评价总数\n\n{c}",
									textStyle: {
										fontWeight: "normal",
										fontSize: 28,
									},
									show: true,
									position: "center",
									color: "#fff",
								},
							},
							labelLine: {
								normal: {
									smooth: true,
									lineStyle: {
										width: 0,
									},
								},
							},
							hoverAnimation: false,
						}, ],
					},
					]
				};
				
				charthead2.series[0].data = jsonArr;
				charthead2.series[1].data[0].value = total;
				$charthead2.setOption(charthead2, true);
			});
				
			let urltask = "/api/digitaldata/getCctaskList";
			http.post(urltask, {}, true).then((s) => {
				this.tableData = s;
			});
			let urltask2 = "/api/digitaldata/getCctaskOfFinishList";
			http.post(urltask2, {}, true).then((s) => {
				this.tableData2 = s;
			});
		},
		destroyed() {
			$charthead1a = null;
			$charthead1b = null;
			$charthead1c = null;
			$charthead2 = null;

		},
	};
	
</script>

<style>
	.data-head>div {
		float: left;
	}

	.data-head-item {
		border: 1px solid rgba(25, 186, 139, 0.17);
		padding: 0 0.2rem 0.4rem 0.15rem;
		background: rgba(255, 255, 255, 0.04);
		background-size: 100% auto;
		position: relative;
		margin-bottom: 0.15rem;
		z-index: 10;
	}

	.data-head-item-gdzz {
		text-align: center;
		color: white;
		font-size: 28px;
		position: relative;
		margin-bottom: 0.15rem;
	}

	.data-center-item {
		border: 1px solid rgba(25, 186, 139, 0.17);
		padding: 0 0.2rem 0.4rem 0.15rem;
		background: rgba(255, 255, 255, 0.04);
		background-size: 100% auto;
		position: relative;
		margin-bottom: 0.15rem;
		z-index: 10;
	}

	.data-center-item {
		border: 1px solid rgba(25, 186, 139, 0.17);
		padding: 0 0.2rem 0.4rem 0.15rem;
		background: rgba(255, 255, 255, 0.04);
		background-size: 100% auto;
		position: relative;
		margin-bottom: 0.15rem;
		z-index: 10;

	}
	
	.table-container{
	    width: 100%;
	    height: auto;
		background-color: #190e52;
	  }
	.el-table__cell {
		background-color: #190e52;  
		color: #fff;
		font-size: 20px;
	  }
	.cell{
		background-color: #190e52;
		color: #fff;
		font-size: 20px;
	 }
/* #017590 */
	.el-table th.el-table__cell{
		background-color: #190e52;
	}
	
	.el-table {
		--el-table-row-hover-bg-color:#190e52; 
		--el-table-tr-bg-color:#190e52; 
		--el-table-border-color:#017590;
		/* --el-table-border:3px #017590 solid; */
	}
	.el-table .el-table__cell{border:2.8px #017590 solid;}
	.el-progress-bar__innerText{
		font-size: 22px;
	}
	
</style>